<template>
  <div class="vertical-bar">
    <el-text class="vertical-font" style="width: 100%;" truncated>{{ startDate }} ~
      {{ endDate }} 年度情报数据统计中心
    </el-text>
    <!--    2024-08-05 ~ 2024-08-11 -->
    <div ref="target" style="width:90%; height:500px;"></div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, watch, nextTick} from "vue";
import * as echarts from "echarts";
import {IndexCrawlerDataVo} from "@/store/types";

const props = defineProps<{
  data: IndexCrawlerDataVo[];
}>();

let startDate = ref(null);
let endDate = ref(null);

let chart: any = null;
const target = ref(null);

onMounted(() => {
  chart = echarts.init(target.value);

  nextTick();
});
nextTick(() => {
  renderChart();
})

const renderChart = () => {
  startDate.value = props.data[0].crawlerDate;
  endDate.value = props.data[props.data.length - 1].crawlerDate;
  const options = {
    backgroundColor: '#FFFFFF',
    // 图表绘制的位置 上下左右
    grid: {
      top: 16,
      left: 26,
      right: 0,
      bottom: 26,
      // 包含标签区域
      containLabel: true,
    },
    // x轴数据
    xAxis: {
      type: "category",
      data: props.data.map((item) => item.crawlerDate),
      // 坐标轴刻度标签的相关设置
      axisLabel: {
        color: "#9eb1c8",
        interval: 0
      },
    },
    // y轴数据
    yAxis: {
      type: "value",
      show: true,
    },
    // 核心配置
    series: [
      {
        type: "bar",
        data: props.data.map((item) => item.totals),
        // 柱条宽度
        barWidth: 36,
        // 柱条样式
        itemStyle: {
          color: "#479AD3",
          borderRadius: 6,
          shadowColor: "rgba(0, 0, 0, 0.3)",
          shadowBlur: 5,
        },
        // 柱条标签
        label: {
          show: false,
          position: "top",
          color: "#FFFFFF",
          formatter: "{c}%",
        },
      },
    ],
  };
  chart.setOption(options)
};

watch(() => props.data, renderChart);

window.addEventListener("resize", () => {
  chart.resize();
});
</script>

<style lang="scss" scoped>
.vertical-bar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  background-color: #FFFFFF;
  border-radius: 20px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  .vertical-font {
    margin-left: 20px;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
